<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/vue.js"></script>


     <div id="app">
        <!-- 插值表达式 -->
       <!-- <p v-text="title">666</p>
       <p v-html="htmlContent"></p> -->

       <!-- <p v-for="item in arr"> 这是{{item}} </p> -->
        
       <!-- <p v-if="bool">这是一个标签</p>
       <p v-show="bool">这是一个标签</p> -->

       <!-- <p : title="title">文本</p> -->

       <!-- <button @click="t1">按钮</button> -->
        <input v-model.trim="inputContent" type="text">
        <p v-text="inputContent"></p>
        <input v-model="inputContent" type="text">

     </div>  
     <script> 
    //  1.响应式数据和插值表达式
        // 
      const vm = new Vue({
        
        el:'#app',
        // 响应式数据
        data(){
            return{
               inputContent: '输入框内容' 
            }
        },
        // method 函数
        methods: {
            t1 (){
              alert("点击事件")
            } 
        },
        // 计算属性
        computed:{
            t2(){
                console.log("computed");
                return '标题: '+ this.title + ' 正文: '+this.content ; 
            }

        },
        // 侦听器
        watch:{
            title (newValue , oldValue){
                 console.log("新的值:"+newValue);
                 console.log("旧的值:"+oldValue);
                 
            }
        }


      })




     </script> 
</body>
</html>